<template>
  <div class="major-detail-content">
    <Navbar title="事件详情" foo-back @back="handleBack" />
    
    <div class="content">
      <div class="img-swiper-wrap" v-if="imgUrls.length">
        <van-swipe
          @change="onChange2"
          class="back-swipe"
          :autoplay="3000"
          show-indicators
        >
          <van-swipe-item v-for="(image, index) in imgUrls" :key="index">
            <img @click="previewImg" :src="image" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator flex-center">
              <span>{{ imgUrls.length?(current + 1): 0 }}/{{imgUrls.length}}</span>
              <img src="@/assets/event/icon-pic.png" alt="">
            </div>
          </template>
        </van-swipe>
      </div>
      <div class="top">
        <label>{{detailData.sjfl || "重大突发事件"}}</label>
        <p class="title">{{detailData.sjmc}}</p>
        <div class="info">
          <p class="time">事发时间： {{detailData.cssjTbsj}}</p>
          <p class="address">事发位置： {{detailData.location}}</p>
        </div>
        <div class="desc">
          {{detailData.sjnr}}
        </div>
      </div>
      <div class="module">
        <div class="title">处置流程</div>
        <van-empty v-if="!detailData.flowList.length" description="暂无处置流程" />
        <van-steps v-else class="step-list" direction="vertical" :active="stepsActive">
          <van-step class="step-item" v-for="(item,index) in detailData.flowList" :key="index">
            <p class="time">{{item.czsj}}</p>
            <p class="text">{{item.czjg}}</p>
            <div class="btn" @click="handleContact">
              <span>{{item.czr}}</span>
              <span>{{item.blbm}}</span>
            </div>
          </van-step>
        </van-steps>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, watch, onMounted } from 'vue'
import Navbar from '@/components/Navbar/index.vue'
import { useRoute } from 'vue-router'
import { useContactStore } from '@/store'
import { number } from 'echarts'
import { showImagePreview } from 'vant'

defineOptions({
  name: 'MajorDetail'
})

const props = defineProps({
  detailData: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits(['detail-close'])

const route = useRoute()
const imgUrls = ref<RecordType[]>([])
const current = ref(0)
const stepsActive =ref(0) 

const contactStore = useContactStore()
const handleContact = (ids: any) =>{
  contactStore.fetchUserDetail(props.detailData.userId)
}

const onChange2 = (index: number) => {
  current.value = index
}

const handleBack = () => {
  emit('detail-close')
}

onMounted(() => {
  stepsActive.value = props.detailData.flowList?props.detailData.flowList.length-1: 0
  imgUrls.value =
    props.detailData.imageList && props.detailData.imageList.length > 0
      ? props.detailData.imageList
      : []
})

//图片放大查看
const previewImg = () => {
  showImagePreview({
    images: imgUrls.value,
    startPosition: 1
  });
}

</script>

<script lang="ts">

</script>

<style lang="less" scoped>
.major-detail-content{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: #F4F8FB;
  .content{
    padding: 0 0 90px;
    height: 100vh;
    color: #212121;
    overflow-y: scroll;
    box-sizing: border-box;
  }
  .img-swiper-wrap {
    width: 100%;
    /*添加渐变效果*/
    // -webkit-mask-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3));
    // mask-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3));
    // transition: opacity 0.5s ease-in-out;
    .back-swipe {
      img {
        width: 100%;
        height: 180px;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 0 8px;
      color: #ffffff;
      font-size: 12px;
      height: 22px;
      border-radius: 11px;
      background: #0000007F;
      img{
        width: 10px;
        height: 10px;
        margin-left: 5px;
      }
    }
  }
  .top{
    background: #fff;
    padding: 15px;
    line-height: 22px;
    label{
      display: inline-block;
      border-radius: 3px;
      background: #FF621119;
      color: #FF6211;
      font-weight: bold;
      font-size: 13px;
      padding: 0 12px;
      height: 24px;
      line-height: 24px;
      margin-bottom: 5px;
    }
    .title{
      color: #000;
      font-weight: bold;
      font-size: 17px;
    }
    .info{
      border-radius: 6px;
      padding: 6px 9px 7px 9px;
      font-size: 12px;
      margin-top: 8px;
      background: #3A75C50F;
      .time{
        background: url("@/assets/icon/icon-blue-time.png") no-repeat left center;
        background-size: 12px 12px;
        padding-left: 15px;
      }
      .address{
        background: url("@/assets/icon/icon-blue-position.png") no-repeat left 4px;
        background-size: 12px 12px;
        padding-left: 15px;
      }
    }
    .desc{
      color: #000;
      margin-top: 12px;
      font-size: 15px;
      line-height: 25px;
    }
  }
  .module{
    border-radius: 8px;
    background: #FFFFFF;
    margin: 12px 12px 0;
    padding: 12px;
    .title{
      font-weight: bold;
      font-size: 16px;
      line-height: 16px;
      background: url("@/assets/keyWork/icon-detail-title.png") no-repeat left 2px;
      background-size: 8px 16px;
      padding-left: 12px;
      margin-bottom: 12px;
    }
    .step-list{
      .step-item{
        line-height: 23px;
        font-size: 14px;
        .time{
          color: #21212199;
          margin-top: -5px;
        }
        .text{
          color: #212121;
          font-weight: bold;
          font-size: 15px;
          margin: 4px 0 8px;
        }
        .btn{
          display: flex;
          width: fit-content;
          border-radius: 14px;
          height: 28px;
          line-height: 28px;
          background: #3D76CC19 url("@/assets/event/icon-contact.png") no-repeat 12px center;
          background-size: 10px 10px;
          color: #3D76CC;
          font-weight: bold;
          padding: 0 12px 0 30px;
          span:last-child{
            display: flex;
            align-items: center;
            &::before{
              content: "";
              display: inline-block;
              margin: 0 6px;
              height: 14px;
              width: 1px;
              background: #3D76CC;
            }
          }
        }
      }
    }
    :deep(.van-steps){
      .van-step__line{
        border-left: 1.5px dashed #DDDDDD;
        background: transparent;
      }
      .van-step__circle-container{
        left: -14.5px;
        top: 15px;
        .van-step__circle{
          background: #DDDDDD;
          width: 9px;
          height: 9px;
        }
      }
      .van-step--finish{
        .van-step__line{
          border-color: #3D76CC;
        }
        .van-step__circle-container{
          .van-step__circle{
            background: url("@/assets/event/icon-step.png");
            background-size: 9px 9px;
          }
        }
      }
      .van-step__icon--active{
        display: block;
        width: 9px;
        height: 9px;
        background: url("@/assets/event/icon-step.png");
        background-size: 9px 9px;
        &::before{
          display: none;
        }
      }
      .van-step:last-child .van-step__line{
        border: none;
      }
    }
  }
}
</style>
